<template>
  <!-- 最新专题 -->
  <section>
    <div class="new-goods-box">
      <div class="container">
        <div class="good-title">
          <div class="title-left">
            <h1>最新专题</h1>
          </div>
          <div class="title-right"><a href="">查看全部 ></a></div>
        </div>
        <div class="new-list">
          <div class="new-list-goods" v-for="good in newList" :key="good.id">
            <div class="list-img">
              <img :src="good.cover" alt="" />
              <div class="img-desc-top">
                <div class="img-desc-left">
                  <h1>{{ good.title }}</h1>
                  <span>{{ good.summary }}</span>
                </div>
                <div class="img-desc-right">
                  <span>￥{{good.lowestPrice}}起</span>
                </div>
              </div>
            </div>
            <div class="nwe-number">
              <div class="number-left">
                <span>♡{{good.collectNum}}</span>
                <span>♡{{good.replyNum}}</span>
              </div>
              <div class="number-right">
                <span>♡{{good.viewNum}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { mapState } from "vuex";
export default {
  mounted() {
    this.$store.dispatch("getNew");
  },
  computed: {
    ...mapState({
      newList: (state) => state.home.newList,
    }),
  },
};
</script>

<style>
.new-goods-box {
  background-color: #f5f5f5;
}

.new-goods-box .new-list {
  display: flex;
  height: 380px;
  width: 100%;
}

.new-goods-box .new-list .new-list-goods {
  flex: 1;
  height: 360px;
  margin-right: 10px;
  background-color: #ffffff;
}

.new-list-goods img {
  width: 404px;
  height: 288px;
}

.new-list-goods .img-desc-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  padding: 0 16px;
  margin-top: -70px;
  background: rgba(0, 0, 0, 0.2);
}

.img-desc-top .img-desc-left {
  width: 282.8px;
  height: 70px;
  color: #ffffff;
}

.img-desc-left h1 {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img-desc-left span {
  display: inline-block;
  width: 100%;
  font-size: 20px;
  color: gray;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img-desc-right {
  height: 20px;
  padding: 0 5px;
  margin-top: 20px;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 3px;
}

.img-desc-right span {
  font-size: 16px;
  color: red;
}

.new-list-goods .nwe-number {
  display: flex;
  font-size: 18px;
  margin-top: 20px;
  padding: 0 15px;
  justify-content: space-between;
}

.nwe-number .number-left span:nth-child(2) {
  padding-left: 20px;
}

.new-list-goods:hover {
  position: relative;
  top: -8px;
  transition: all 0.5s linear;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), -3px -3px 5px rgba(0, 0, 0, 0.2);
}
</style>